<style>
.top-li{
  border-top: 1px solid rgba(238,238,238,1);
  text-align: center;
  padding:15px 0;
  /* margin: 0 5px; */
  font-size:14px;
  background: rgba(255,255,255,1);
  color:rgba(102,99,99,1);
  /* border-bottom:3px solid rgba(255,161,176,1); */
}
.active-li{
    color:rgba(255,161,176,1);
  }
  .pad1{
    margin-left: 4%;
  }
  .pad2{
    margin-left: 24%;
  }
  .pad3{
    margin-left: 44%;
  }
  .pad4{
    margin-left: 64%;
  }
  .pad5{
    margin-left: 84%;
  }
  body,html,.box{
    height: 100%;
    /* position: fixed;left: 0;right: 0;top: 0;bottom: 0; */
  }
  .data-li{
    padding:15px;
    /* margin-top: 15px; */
    border-bottom: 10px solid rgba(250,250,250,1);

  }
  .data-li:nth-last-child(1){
    border-bottom: 0px solid rgba(250,250,250,1);
  }
  .li-time{
    font-size:12px;
    font-family:'SourceHanSansCN-Regular';
    font-weight:400;
    color:rgba(102,99,99,1);
    margin-bottom: 15px;
  }
  .li-content{
    padding:15px 8px;
    background: rgba(250,250,250,1);
  }
  .li-content-right{
    padding-left:12px;
    div:nth-child(1){
      font-size:14px;
      font-family:SourceHanSansCN-Medium;
      font-weight:600;
      color:rgba(25,25,25,1);
      line-height:18px;
    }
    div:nth-child(2){
      font-size:12px;
      font-family:'SourceHanSansCN-Regular';
      font-weight:400;
      color:rgba(160,154,155,1);
    }
  }
  .add-box{
    padding:20px 0;
    border-bottom:1px solid rgba(238,238,238,1);
    :nth-child(1){
      font-size:14px;
      font-family:'SourceHanSansCN-Regular';
      font-weight:400;
      color:rgba(65,61,61,1);
      padding-bottom:10px;
    }
    :nth-child(2){
      font-size:12px;
      font-family:'SourceHanSansCN-Regular';
      font-weight:400;
      color:rgba(102,99,99,1);
      /* margin-top: 7px; */
    }
    :nth-child(3){
      font-size:12px;
      font-family:'SourceHanSansCN-Regular';
      font-weight:400;
      color:rgba(102,99,99,1);
      margin-top: 7px;
    }
  }
  .btn-box{
    padding:12px;

    span{
      width: 80px;
      height: 30px;
      display: inline-block;
      /* padding:8px 12px; */
      text-align:center;
      border:1px solid rgba(255,161,176,1);
      margin-left: 15px;
      font-size:14px;
      font-family:'SourceHanSansCN-Regular';
      font-weight:400;
      color:rgba(242,165,177,1);
      line-height:28px;
    }
    span:nth-child(1){
      background:rgba(242,165,177,1);
      color:rgba(255,255,255,1);
    }
    span:nth-child(3){
      margin-left: 0;
    }
  }
  .top-tabbar{
      position: fixed;left: 0;top: 1.45rem;width: 100%;
    }
</style>
<template>
  <div class="order" id="transition">
    <ComHeader title="我的订单" leftArrow="true"/>

    <div class="orderMain">
      <div class="order-box flex-display">
        <p
          v-for="(element, index) in navList"
          @click="checkOrderStatus(index,false)"
          :key="index"
          class="flex-num-one"
        >
          <a :class="{active:index == nowIndex}">{{element.item}}</a>
        </p>
      </div>
    </div>
    <div class="scroll-fixed">
      <!-- <scroll
        class="scroll"
        :data="orderList"
        :pullup="isPullup"
        @scrollToEnd="searchMore"
        ref="suggest"
      > -->
        <ul>
          {{orderList | json}}
            <li class="data-li" v-for="(item,index) in orderList" :key="index">
              123
                <p class="li-time">
                  <span>{{item.date}}</span>  
                  <span style="padding-left: 10px;">{{item.time}}</span>
                </p>
                <div class="flex-display li-content">
                  <div>
                    <img :src="item.img" alt="" style="width: 73px;height: 73px;">
                  </div>
                  <div class="li-content-right flex-column-between">
                    <div>
                        <p>{{item.title}}</p>
                        <p>{{item.dicsripe}}</p>
                    </div>
                    <div>
                        数量：{{item.goodsnum}}
                    </div>
                  </div>
                </div>
                <div class="add-box">
                  <p>送货地址</p>
                  <p>
                      {{item.name}}   {{item.phone}}
                  </p>
                  <p>
                      <img src="../../static/new/icon_location.png" alt="" style="margin-bottom: -6px;width: 8px;height:20px;">
                      {{item.add}}
                  </p>
                </div>
                <div class="flex-display btn-box" style="flex-direction:row-reverse">
                  <span>确定出货</span><span>修改订单</span><span>删除订单</span>
                </div>
              </li>
        </ul>
        <!--没数据得情况-->
        <!-- <div
          class="not-data__box flex-display flex-display-column flex-center-pack flex-center-align"
          v-if="!isHasMore && !orderList.length"
        >
          <img src="../../static/img/not-data.png">
          <span>抱歉！暂无相关订单记录</span>
        </div> -->
      <!-- </scroll> -->
    </div>
  </div>
</template>

<script>
import api from "@/fetch/api";
import ComHeader from "@/common/ComHeader";
import Scroll from "@/base/scroll/scroll";
import Loading from "@/base/loading/loading";
import axios from "axios";
import { Indicator, Toast } from "mint-ui";
export default {
  name: "oerder",
  data() {
    return {
      isPullup: true, // 是否需要滚动结束派发事件
      isHasMore: true, // 是否价值底部loading
      nowIndex: 0,  // nav索引
      beforeScroll: true,
      limit: 10, // 每页多少条 默认10条
      page: 1, // 当前第几页
      navList: [
        // 导航列表数据
        {
          item: "进货单"
        },
        {
          item: "出货单"
        },
        {
          item: "转让单"
        },
        {
          item: "处理中"
        },
        {
          item: "已完成"
        }
      ],
      orderList: [
      {
            date:'2019-3-28',
            time:'12:22:22',
            img:'../../../../static/new/tab_study_nor@2x.png',
            title:'容维他命C焕颜水光面膜30ml*48片（箱）',
            dicsripe:'维他命C焕颜水光面膜',
            goodsnum:5,
            name:'塞小娜',
            phone:'18012345678',
            add:'广东省广州市越秀区西华路小北街60号502',
          },
          {
            date:'2019-3-28',
            time:'12:22:22',
            img:'../../../../static/new/tab_study_nor@2x.png',
            title:'容维他命C焕颜水光面膜30ml*48片（箱）',
            dicsripe:'维他命C焕颜水光面膜',
            goodsnum:5,
            name:'塞小娜',
            phone:'18012345678',
            add:'广东省广州市越秀区西华路小北街60号502',
          },
          {
            date:'2019-3-28',
            time:'12:22:22',
            img:'../../../../static/new/tab_study_nor@2x.png',
            title:'容维他命C焕颜水光面膜30ml*48片（箱）',
            dicsripe:'维他命C焕颜水光面膜',
            goodsnum:5,
            name:'塞小娜',
            phone:'18012345678',
            add:'广东省广州市越秀区西华路小北街60号502',
          },
          {
            date:'2019-3-28',
            time:'12:22:22',
            img:'../../../../static/new/tab_study_nor@2x.png',
            title:'容维他命C焕颜水光面膜30ml*48片（箱）',
            dicsripe:'维他命C焕颜水光面膜',
            goodsnum:5,
            name:'塞小娜',
            phone:'18012345678',
            add:'广东省广州市越秀区西华路小北街60号502',
          },
          {
            date:'2019-3-28',
            time:'12:22:22',
            img:'../../../../static/new/tab_study_nor@2x.png',
            title:'容维他命C焕颜水光面膜30ml*48片（箱）',
            dicsripe:'维他命C焕颜水光面膜',
            goodsnum:5,
            name:'塞小娜',
            phone:'18012345678',
            add:'广东省广州市越秀区西华路小北街60号502',
          },
          {
            date:'2019-3-28',
            time:'12:22:22',
            img:'../../../../static/new/tab_study_nor@2x.png',
            title:'容维他命C焕颜水光面膜30ml*48片（箱）',
            dicsripe:'维他命C焕颜水光面膜',
            goodsnum:5,
            name:'塞小娜',
            phone:'18012345678',
            add:'广东省广州市越秀区西华路小北街60号502',
          },
      ]
    };
  },
  components: {
    Scroll,
    ComHeader,
    Loading,
    Indicator,
    Toast
  },
  created() {
    // 初始化订单
    Indicator.open({
      text: "加载中...",
      spinnerType: "fading-circle"
    });
    this.nowIndex = this.$route.query.index ? this.$route.query.index : 0;
    this.checkOrderStatus(this.nowIndex, false);
  },
  methods: {
    clickToMachineDetail(list) {
      if (list.goods) {
        this.$router.push({
          path: "OrderDetails",
          query: {
            orderId: list.dg_ddid
          }
        });
        this.setlocalStorage("orderDetail", list);
      } else {
        this.$router.push({
          path: "mOrderDetails",
          query: {
            orderMachineId: list
          }
        });
        this.setlocalStorage("orderMachineDetail", list);
      }
    },
    // 正常订单
    clickToDetail(list) {
      this.$router.push({
        path: "OrderDetails",
        query: {
          orderId: list.dg_ddid
        }
      });
      this.setlocalStorage("orderDetail", list);
    },
    
    /**
     * @param {Number} num 导航索引
     */
    checkOrderStatus(num, isPullFalg = false) {
      if (!isPullFalg) {
        this.page = 1;
        // this.orderList = [];
      }
      if (this.$refs.suggest && !isPullFalg) {
        this.$refs.suggest.scrollTo(0, 0);
      }

      this.nowIndex = num;
      // 0=全部 1=待付款 2=待发货 3=待收货
      var orderApiName = "";
      switch (num) {
        case 0:
          orderApiName = api.myOrderlist;
          break;
        case 1:
          orderApiName = api.myQueryOrder;
          break;
        case 2:
          orderApiName = api.myOrderSendgoods;
          break;
        case 3:
          orderApiName = api.myOrderWaitgoods;
          break;
        default:
          orderApiName = api.myOrderlist;
          break;
      }
      const params = {
        userid: this.$route.query.uid ? this.$route.query.uid : this.getUId(),
        openid: num === 4 ? this.getOpenID() : "",
        limit: this.limit,
        page: this.page,
        username: this.getUserId()
      };
      orderApiName(params)
        .then(res => {
          Indicator.close();
        })
        .catch(res => {
          Indicator.close();
          if (res.status === 200) {
            Toast({
              message: "获取订单成功",
              duration: 1000
            });
            //this.$refs.suggest.scrollTo(0, 0)
            if (res.data.results.length) {
              this.orderList = [...this.orderList, ...res.data.results];
              console.log(this.orderList);
            }
            this.isHasMore = res.data.next ? true : false;
            this.previous = res.data.next;
            console.log(666);
          }
        });
    },
    //跳去评价
    clickToComment(item) {
      this.$router.push({
        path: "/goods/comment"
      });
      this.setlocalStorage("orderMachineDetail", item);
    },
    //跳去评价列表
    clickToCommentList(item) {
      this.$router.push({
        path: "/goods/commentList"
      });
      this.setlocalStorage("orderMachineDetail", item);
    },
    searchMore() {
      if (this.previous) {
        this.page++;
        this.checkOrderStatus(this.nowIndex, true);
      }
    }
  }
};
</script>



<style lang="stylus" scoped>
.not-data__box {
  color: #666;
  height: 100%;

  >img {
    width: 80%;
    height: auto;
    margin-bottom: 5px;
  }
}

.not-tit {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #666;
  font-size: 0.35rem;
}

.scroll-fixed {
  position: fixed;
  width: 100%;
  top: 95px;
  bottom: 0;
}

.scroll {
  height: 100%;
  overflow: hidden;
}

.orderMain {
  padding-top: 1.3rem;
}

.order-box {
  height: 1rem;
  background: white;
  position: fixed;
  width: 100%;
  overflow-y: auto;
  flex-wrap: nowrap;
  border-bottom: 1px solid #f0f0f0;
  justify-content: space-between;

  .active {
    color:rgba(255,161,176,1);
    border-bottom: 2px solid rgba(255,161,176,1);;
  }

  p {
    width: 25%;
    height: 100%;
    line-height: 1rem;
    text-align: center;

    a {
      width: 70%;
      height: 100%;
      font-size: 0.36rem;
      display: block;
      margin: auto;
    }
  }
}

.order-box2 {
  width: 100%;
  margin-top: 1rem;
}

.orders {
  margin-top: 10px;
  background: #fff;

  ._order {
    width: 100%;
    height: 1.3rem;
    line-height: 1.3rem;
    overflow: hidden;
    background: #ffffff;

    .left {
      float: left;
      color: #666;
      margin-left: 0.5rem;
      font-size: 0.35rem;

      i {
        font-size: 0.4rem;
        color: #666;
      }
    }

    .right {
      float: right;
      color: rgb(0, 172, 255);
      margin-right: 0.3rem;
      font-size: 0.35rem;
    }
  }

  .order {
    width: 100%;
    height: 3rem;
    background: white;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;

    img {
      float: left;
      margin: 0.3rem;
      height: 2.5rem;
      width: 30%;
    }

    .order-div {
      width: 45%;
      margin: 0.3rem;
      line-height: 0.7rem;
      float: left;

      h3 {
        font-size: 0.45rem;
      }

      .order-div-price {
        color: red;
        font-size: 0.4rem;
      }
    }

    .order-div-2 {
      display: inline-block;
      position: absolute;
      right: 0.6rem;
      top: 0.4rem;
      font-size: 0.4rem;
    }
  }

  .order-2 {
    width: 100%;
    background: white;

    .order-2-box {
      width: 50%;
      float: right;
      text-align: right;
      margin: 0.2rem 0.4rem;

      .order-2-zero {
        float: left;
        font-size: 0.35rem;
        margin-left: 0.5rem;

        span {
          color: red;
        }
      }

      .order-2-one {
        font-size: 0.35rem;

        span {
          color: red;
        }
      }

      .order-2-two {
        color: #666;
        padding-top: 0.2rem;
        font-size: 0.35rem;
      }
    }
  }

  .order-3 {
    width: 100%;
    height: 1.1rem;
    overflow: hidden;
    background: white;

    a {
      width: 2.8rem;
      height: 0.7rem;
      line-height: 0.7rem;
      border: 1px solid red;
      border-radius: 3px;
      text-align: center;
      display: block;
      float: right;
      margin-right: 0.3rem;
      margin-top: 0.1rem;
      border: 1px solid #dcdcdc;
      font-size: 0.3rem;
    }
  }
}

.not-data {
  padding: 1rem 0;
  text-align: center;
  font-size: 0.4rem;
}

.myScroller {
  width: 88%;
  margin: 0.5rem auto;
  padding-bottom: 1rem;
  text-align: left;
  font-size: 0.3rem;
  color: #777;

  .prev {
    float: left;
  }

  .next {
    float: right;
  }
}

.no-result-wrapper {
  position: absolute;
  width: 100%;
  top: 50%;
  text-align: center;
  color: #666;
  font-size: 0.35rem;
  transform: translateY(-50%);
}
</style>
